<template>
  <page-header-wrapper>
    <a-card>
      <a-row>
        <a-col :span="4" style="text-align: right;font-weight: 800;font-size: 18px;">
          顶部导航栏：
        </a-col>
        <a-col :span="10" >
          <a-row>
            文字颜色：
            <a-radio-group v-model="navigation_bar_color.frontColor" size="small">
              <a-radio-button value="#000000">
                黑色
              </a-radio-button>
              <a-radio-button value="#ffffff">
                白色
              </a-radio-button>
            </a-radio-group>
          </a-row>
          <a-row style="margin-top: 10px;">
            背景颜色：
            <a-input
              style="width: 20%;"
              v-model="navigation_bar_color.backgroundColor"
              type="color" />
          </a-row>
        </a-col>
        <a-col
          :span="3"
          class="topStyle"
          :style="{background: navigation_bar_color.backgroundColor, color: navigation_bar_color.frontColor}">
          顶部导航栏效果
        </a-col>
      </a-row>
      <a-row style="margin-top: 20px;">
        <a-col :span="4" style="text-align: right;font-weight: 800;font-size: 18px;">
          底部导航图标：
        </a-col>
        <a-col :span="12">
          <a-button
            style="height: 50px;margin-right: 10px;"
            v-for="(nav, index) in navbar.navs"
            @mouseenter="mouse = index"
            @mouseleave="mouse = -1"
            :key="index">
            <img :src="nav.icon" style="width: 20px; height: 20px;" alt="">
            <a-row :style="{ color: nav.color }">{{ nav.text }}</a-row>
            <div v-if="mouse == index" class="mouse">
              <div @click="visible = true; select_index = index; select_nav = nav" style="background: blue;color: #fff;">编辑</div>
              <div @click="navbar.navs.splice(index, 1);" style="background: red;color: #fff;">删除</div>
            </div>
          </a-button>
          <a-button
            @click="visible = true; select_index = -1;"
            style="height: 50px;width: 80px;margin: 10px;">
            <a-icon type="plus" />
            <a-row>添加</a-row>
          </a-button>
        </a-col>
      </a-row>
      <a-row style="margin-top: 20px;">
        <a-col :span="4" style="text-align: right;font-weight: 800;font-size: 18px;">
          底部导航栏：
        </a-col>
        <a-col :span="10" >
          <a-row>
            背景颜色：
            <a-input
              style="width: 20%;"
              v-model="navbar.border_color"
              type="color" />
          </a-row>
        </a-col>
        <a-col
          :span="3"
          class="topStyle"
          :style="{ background: navbar.border_color }">
          底部导航栏效果
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 14px;">
        <a-col :span="4" style="text-align: right;">
        </a-col>
        <a-col :span="18">
          <a-button @click="submitSave()" type="primary">
            保存
          </a-button>
        </a-col>
      </a-row>
      <a-modal
        title="编辑资料"
        v-if="visible"
        :visible="visible"
        @ok="onOk"
        @cancel="visible = false"
      >
        <a-row style="margin-bottom: 14px;">
          <a-col :span="6" style="text-align: right;">
            图标：
          </a-col>
          <a-col :span="18">
            <storage-select
              placeholder="请上传图标"
              v-model="select_nav.icon"
            ></storage-select>
          </a-col>
        </a-row>
        <a-row style="margin-bottom: 14px;">
          <a-col :span="6" style="text-align: right;">
            选中图标：
          </a-col>
          <a-col :span="18">
            <storage-select
              placeholder="请上传选中图标"
              v-model="select_nav.active_icon"
            ></storage-select>
          </a-col>
        </a-row>
        <a-row style="margin-bottom: 14px;">
          <a-col :span="6" style="text-align: right;">
            名称：
          </a-col>
          <a-col :span="18">
            <a-input placeholder="请填写名称" v-model="select_nav.text" />
          </a-col>
        </a-row>
        <a-row style="margin-bottom: 14px;">
          <a-col :span="6" style="text-align: right;">
            文字选中颜色：
          </a-col>
          <a-col :span="18">
            <a-input type="color" v-model="select_nav.active_color" />
          </a-col>
        </a-row>
        <a-row style="margin-bottom: 14px;">
          <a-col :span="6" style="text-align: right;">
            文字未选中颜色：
          </a-col>
          <a-col :span="18">
            <a-input type="color" v-model="select_nav.color" />
          </a-col>
        </a-row>
        <a-row style="margin-bottom: 14px;">
          <a-col :span="6" style="text-align: right;">
            页面：
          </a-col>
          <a-col :span="18" style="display: flex;">
           <a-input placeholder="选择链接" disabled:false :value="select_nav.link ? select_nav.link.name : ''" />
           <a-button @click="showLink = true">选择链接</a-button>
          </a-col>
        </a-row>
      </a-modal>
    </a-card>
    <select-link v-model="showLink" @onOk="onOkLink"></select-link>
  </page-header-wrapper>
</template>

<script>
const select_nav = {
  icon: '',
  active_icon: '',
  text: '',
  active_color: '',
  color: '',
  link: {}
}
import { getInfo, saveInfo } from '@/api/navbar'
import { SelectLink } from '@/components'
export default {
  name: 'DiyNavbar',
  components: {
    SelectLink
  },
  data () {
    return {
      mouse: -1,
      visible: false,
      showLink: false,
      params: [],
      d_params: [], // 编辑导航默认参数
      navigation_bar_color: {
        frontColor: '#000000',
        backgroundColor: '#ffffff',
        bottomBackgroundColor: '#ffffff'
      },
      navbar: {},
      select_nav: select_nav,
      select_index: 0
    }
  },
  watch: {
    select_index(value) {
      if (value == -1) {
        this.select_nav = select_nav
      }
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      const hide = this.$message.loading('加载...')
       getInfo({})
        .then(res => {
          // this.link_list = res.data.link_list
          this.navbar = res.data.navbar
          this.navigation_bar_color = res.data.navigation_bar_color
          hide()
        })
      return false
    },
    onOk (e) {
      this.visible = false
      var selectNav = this.select_nav
      selectNav.link = selectNav.link
      if (this.select_index < 0) {
        this.navbar.navs.push(selectNav)
      } else {
        this.navbar.navs[this.select_index] = selectNav
      }
      console.log(this.navbar)
      console.log(e)
    },
    onOkLink(res) {
      this.select_nav.link = res
    },
    submitSave () {
      this.$message.loading({ content: '提交中', key: 'updatable' })
       saveInfo({
         navigation_bar_color: this.navigation_bar_color,
         navbar: this.navbar
       })
        .then(res => {
          if (res.code === 0) {
            this.$message.success({ content: res.msg, key: 'updatable' })
          } else {
            this.$message.error({ content: res.msg, key: 'updatable' })
          }
        })
      return false
    }
  }
}
</script>
<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.overscroll::-webkit-scrollbar {
  display: none;
}
.topStyle {
  padding: 10px 20px;
  text-align: center;
  box-shadow: 0px 0px 5px #888888;
}

.mouse {
  position: absolute;
  bottom: 0;
  text-align: center;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.mouse div {
  width: 50%;
  text-align: center;
}
</style>
